<template>
	<view class="resume-container">
		<!-- 顶部绿色卡片 -->
		<view class="resume-card-top">
			<view class="resume-card-title" style="margin-bottom: 15px;font-size:25px">
				<text class="name">{{resume.name}}</text>
				<text class="age">{{resume.age}}岁</text>
				<text class="gender">{{resume.gender || '男'}}</text>
			</view>
			<view class="resume-card-brief">
				<view  style="margin-left: 25px;font-size:18px">工作经验: {{resume.workExperience}}年</view>
				<view  style="margin-left: 25px;font-size:18px">最高学历: {{resume.degree}}</view>
				<view  style="margin-left: 25px;font-size:18px">自我评价: {{resume.selfEvaluation}}</view>
			</view>
			<view class="resume-card-contact">
				<u-icon name="phone" size="28" color="#fff" style="margin-right: 8rpx;" />
				<text>联系方式：{{resume.phone || '134****6818'}}</text>
			</view>
		</view>
		<!-- 求职意向区块 -->
		<view class="resume-section">
			<view class="section-title">
				<u-icon name="bag" size="32" color="#54bcbd" style="margin-right: 10rpx;" />
				求职意向
			</view>
			<view class="section-row"><text class="label">求职岗位</text>{{resume.job || '无'}}</view>
			<view class="section-row"><text class="label">期望薪资</text>{{resume.expectedSalary || '无'}}</view>
			<view class="section-row"><text class="label">求职区域</text>{{resume.area || '无'}}</view>
			<view class="section-row"><text class="label">发布时间</text>{{new Date(resume.createTime).toLocaleString() || new Date()}}</view>
		</view>
		<!-- 自我介绍区块 -->
		<view class="resume-section">
			<view class="section-title">
				<u-icon name="account" size="32" color="#54bcbd" style="margin-right: 10rpx;" />
				自我介绍
			</view>
			<view class="section-row">{{resume.description || '敬请联系'}}</view>
		</view>
		<!-- 按钮组 -->
		<view class="btn-group" v-if="role != 'company'" >
			<button class="edit-btn" @click="editResume">编辑简历</button>
<!-- 			<button class="upload-btn" @click="uploadResume">上传简历</button>
			<button class="poster-btn" @click="genPoster">生成海报</button> -->
		</view>
	</view>
</template>

<script>
	import {
		detail,
		personalDetail,
		personalResume
	} from '../../utils/api/modules/user';
	import Upload from '../common/upload.vue';

	export default {
		components: {
			Upload
		},
		data() {
			return {
				user: {},
				showUpload: false,
				resume: {
					name: '',
					age: '',
					gender: uni.getStorageSync('user').sex,
					workExperience: '',
					degree: '',
					description: '',
					phone: uni.getStorageSync('user').phone,
					job: '',
					expectedSalary: '',
					area: '',
					createTime: '',
					selfEvaluation: '',
					role: ''
				},
				userId: uni.getStorageSync('user').id
			}
		},
		methods: {
			editResume() {
				uni.navigateTo({ 
					url: `/pages/resume/resume-edit?id=${this.userId}`,
					success: (res) => {
						// 传递简历数据到编辑页面
						// res.eventChannel.emit('resumeData', { resume: this.resume })
						window.location.reload()
					}
				});
			},
			uploadResume() {
				uni.chooseFile({
					count: 1,
					success: res => {
						this.resume.file = res.tempFiles[0].name;
						this.resume.filePath = res.tempFiles[0].path;
						uni.showToast({ title: '上传成功', icon: 'success' });
					}
				})
			},
			genPoster() {
				uni.navigateTo({ url: '/pages/resume/resume-poster' });
			}                                                    
		},
		onLoad(options) {
			this.role = uni.getStorageSync('user').role
			let id = options.id;
			personalResume({ userId: id }).then(res => {
				this.resume = res;
			}).catch(err => {
				console.log(err)
			})
		},
		onShow() {
			// 返回后自动刷新简历
			const resume = uni.getStorageSync('resume');
			if (resume) this.resume = resume;
		}
	}
</script>

<style>
	.resume-container {
		background: #f7f7f7;
		min-height: 100vh;
		padding-bottom: 40rpx;
	}
	.resume-card-top {
		background: #2ecc71;
		border-radius: 20rpx;
		margin: 32rpx 20rpx 0 20rpx;
		padding: 32rpx 24rpx 24rpx 24rpx;
		color: #fff;
		box-shadow: 0 2rpx 8rpx #b2f0c7;
	}
	.resume-card-title {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	.resume-card-title .name {
		margin-right: 16rpx;
	}
	.resume-card-title .age {
		margin-right: 16rpx;
	}
	.resume-card-title .gender {
		font-size: 28rpx;
	}
	.resume-card-brief {
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}
	.resume-card-contact {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}
	.resume-section {
		background: #fff;
		border-radius: 16rpx;
		margin: 24rpx 20rpx 0 20rpx;
		padding: 24rpx 20rpx;
		box-shadow: 0 2rpx 8rpx #f0f1f2;
		display: flex;
		flex-direction: column;
	}
	.section-title {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #54bcbd;
		margin-bottom: 12rpx;
	}
	.section-row {
		font-size: 26rpx;
		color: #333;
		margin-bottom: 8rpx;
	}
	.label {
		color: #54bcbd;
		margin-right: 12rpx;
	}
	.btn-group {
		display: flex;
		padding: 20rpx;
	}
	.edit-btn {
		background: #2d8cf0;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		padding: 10rpx 30rpx;
	}
	.upload-btn {
		background: #fffbe6;
		color: #faad14;
		border: none;
		border-radius: 8rpx;
		padding: 10rpx 30rpx;
	}
	.poster-btn {
		background: #fff;
		color: #2d8cf0;
		border: 1px solid #2d8cf0;
		border-radius: 8rpx;
		padding: 10rpx 30rpx;
	}
</style>